<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>一周年快乐 💖</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: radial-gradient(circle at 30% 30%, #ffd6f6, #f0c9ff, #fbd3ec);
            font-family: "ZCOOL XiaoWei", "Microsoft YaHei", sans-serif;
        }

        /* 流光层 */
        .aurora {
            position: fixed;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: conic-gradient(from 90deg at 50% 50%, #ffd1dc, #ffc6ff, #fff0f5, #ffd1dc);
            mix-blend-mode: overlay;
            opacity: 0.35;
            animation: rotate 25s linear infinite;
            z-index: 0;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* 星空 */
        .stars {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            opacity: 0.8;
            animation: twinkle 2s infinite ease-in-out;
        }

        @keyframes twinkle {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 1;
            }
        }

        /* 主体 */
        .container {
            position: relative;
            z-index: 3;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
            text-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
        }

        h1 {
            font-size: 3em;
            animation: float 3s ease-in-out infinite;
            margin: 0.3em;
        }

        p {
            font-size: 1.3em;
            max-width: 90%;
            color: #fff;
            opacity: 0.9;
            animation: fadeInUp 3s ease-out;
            line-height: 1.8;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 飘落爱心 */
        .heart {
            position: fixed;
            z-index: 2;
            color: rgba(255, 255, 255, 0.85);
            animation: fall linear forwards;
        }

        @keyframes fall {
            0% {
                transform: translateY(-10px) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(110vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* 上升爱心 */
        .float-heart {
            position: fixed;
            bottom: -10px;
            font-size: 16px;
            color: rgba(255, 192, 203, 0.8);
            animation: rise 6s linear forwards;
            z-index: 4;
        }

        @keyframes rise {
            0% {
                transform: translateY(0) scale(1) rotate(0deg);
                opacity: 1;
            }

            100% {
                transform: translateY(-120vh) scale(1.3) rotate(720deg);
                opacity: 0;
            }
        }

        /* 烟花 Canvas */
        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 2;
        }

        /* 音乐提示 */
        .hint {
            position: fixed;
            bottom: 15px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
            z-index: 5;
            animation: fadeInOut 4s ease-in-out infinite;
        }

        @keyframes fadeInOut {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div class="aurora"></div>
    <div class="stars"></div>
    <canvas id="fireworks"></canvas>

    <div class="container">
        <h1>祝我们一周年快乐！💞</h1>
        <p>
            夜空洒满流光，梦也轻柔。<br>
            这一年，我们的故事如星闪烁。<br><br>
            愿未来的时光，<br>
            依旧如初见般温柔灿烂。💗
        </p>
    </div>

    <div class="hint">🎵 如果音乐没自动播放，请轻点页面～</div>

    <!-- ✅ 自动播放 + 静音加载 + 淡入音量 -->
    <audio id="bgm" autoplay loop playsinline muted>
        <source src="https://www.bensound.com/bensound-music/bensound-love.mp3" type="audio/mpeg">
    </audio>

    <script>
        // 🌟 星星
        const stars = document.querySelector('.stars');
        for (let i = 0; i < 70; i++) {
            const s = document.createElement('div');
            s.className = 'star';
            s.style.left = Math.random() * 100 + 'vw';
            s.style.top = Math.random() * 100 + 'vh';
            s.style.animationDuration = (1 + Math.random() * 3) + 's';
            stars.appendChild(s);
        }

        // 💗 下落爱心
        setInterval(() => {
            const heart = document.createElement('div');
            heart.classList.add('heart');
            heart.textContent = '💗';
            heart.style.left = Math.random() * 100 + 'vw';
            heart.style.fontSize = 10 + Math.random() * 18 + 'px';
            heart.style.animationDuration = 5 + Math.random() * 5 + 's';
            document.body.appendChild(heart);
            setTimeout(() => heart.remove(), 8000);
        }, 300);

        // 💖 上升爱心
        setInterval(() => {
            const fh = document.createElement('div');
            fh.classList.add('float-heart');
            fh.textContent = '💖';
            fh.style.left = Math.random() * 100 + 'vw';
            fh.style.fontSize = 14 + Math.random() * 24 + 'px';
            document.body.appendChild(fh);
            setTimeout(() => fh.remove(), 7000);
        }, 700);

        // 🎇 烟花效果（少量淡出）
        const canvas = document.getElementById('fireworks');
        const ctx = canvas.getContext('2d');
        resize();
        window.addEventListener('resize', resize);

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        const fireworks = [];
        function random(min, max) { return Math.random() * (max - min) + min; }
        function Firework() {
            this.x = random(0, canvas.width);
            this.y = canvas.height;
            this.targetY = random(canvas.height / 3, canvas.height / 2);
            this.color = `hsl(${random(320, 360)},90%,75%)`;
            this.speed = random(3, 5);
            this.particles = [];
            this.exploded = false;
        }
        Firework.prototype.update = function () {
            if (!this.exploded) {
                this.y -= this.speed;
                if (this.y <= this.targetY) { this.explode(); }
            } else {
                this.particles.forEach(p => {
                    p.x += p.vx;
                    p.y += p.vy;
                    p.vy += 0.02;
                    p.life--;
                });
                this.particles = this.particles.filter(p => p.life > 0);
            }
        }
        Firework.prototype.explode = function () {
            this.exploded = true;
            for (let i = 0; i < 40; i++) {
                this.particles.push({
                    x: this.x,
                    y: this.y,
                    vx: Math.cos(i * 2 * Math.PI / 40) * random(1, 4),
                    vy: Math.sin(i * 2 * Math.PI / 40) * random(1, 4),
                    life: random(40, 70)
                });
            }
        }
        Firework.prototype.draw = function () {
            if (!this.exploded) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            } else {
                this.particles.forEach(p => {
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                });
            }
        }

        function loop() {
            requestAnimationFrame(loop);
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            if (Math.random() < 0.015) { fireworks.push(new Firework()); }
            fireworks.forEach(fw => {
                fw.update();
                fw.draw();
            });
            for (let i = fireworks.length - 1; i >= 0; i--) {
                if (fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                }
            }
        }
        loop();

        // 🎵 自动播放 + 淡入音量
        const bgm = document.getElementById("bgm");

        document.addEventListener("DOMContentLoaded", () => {
            bgm.play().catch(() => { });
        });

        function enableAudio() {
            bgm.muted = false;
            bgm.volume = 0;
            bgm.play().catch(() => { });

            // 音量淡入（2秒）
            let vol = 0;
            const fade = setInterval(() => {
                if (vol < 1) {
                    vol += 0.05;
                    bgm.volume = Math.min(1, vol);
                } else clearInterval(fade);
            }, 100);

            document.removeEventListener("touchstart", enableAudio);
            document.removeEventListener("click", enableAudio);
        }

        document.addEventListener("touchstart", enableAudio);
        document.addEventListener("click", enableAudio);
    </script>
</body>

</html>